import Base from "../base.js"; //引用基类
import MoviesApi from "../../api/movies.js";

// 初始化表单信息
const moviesProps = [
    { name: "电影名", key: "cname" },
    { name: "电影英文名", key: "ename" },
    { name: "类型", key: "type" },
    { name: "首映地区", key: "area" },
    { name: "电影时长", key: "time" },
    { name: "上映时间", key: "upDate" },
    { name: "评分", key: "score" },
    { name: "票房", key: "count" },
    { name: "剧情简介", key: "intro" },
    { name: "是否是经典", key: "isClassic" },
    { name: "导演", key: "director" },
    { name: "演员", key: "actor" },
    { name: "图片", key: "poster" },

];

// 暴露并创建新增学生视图
export default class extends Base {
    // 设置this.data
    constructor(props) {
        super(props);
        this.data = {
            _id: props._id,

        }
        // 初始化数据
        this.student = {
            _id: "",
            cname: "",
            ename: '',
            type: '',
            area: "",
            time: "",
            upDate: "",
            score: "",
            count: "",
            isClassic: "",
            director: "",
            actor: "",
            poster: [],
            intro: "",
        }
    };
    // 函数渲染
    render() {
        const student = this.student;
        this.$el.html(`
        <div style="text-align:center;">
            <h1 style="font-size:23px; text-align:center; line-height: 100px;height: 100px;">修改电影信息</h1>
            <!-- 新增表单信息 -->
            <form class="layui-form"  style="display:-webkit-box; flex-flow:wrap;margin: auto 100px;border: groove;padding:50px 100px;">
                ${moviesProps.map(item => {
            // 类型 多选框
            if (item.key === "type") {
                return ` 
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width:revert;text-align: right; ">${item.name}</label>
                    <div class="layui-input-block" style="text-align: center;">
                        <select name="${item.key}" lay-verify="required" lay-search lay-filter="demo">
                            <option value="1" >请选择</option>
                            <option value="爱情">爱情</option>
                            <option value="喜剧">喜剧</option>
                            <option value="动画">动画</option>
                            <option value="剧情">剧情</option>
                            <option value="恐怖">恐怖</option>
                            <option value="惊悚">惊悚</option>
                            <option value="科幻">科幻</option>
                            <option value="动作">动作</option>
                            <option value="悬疑">悬疑</option>
                            <option value="犯罪">犯罪</option>
                            <option value="冒险">冒险</option>
                            <option value="战争">战争</option>
                            <option value="奇幻">奇幻</option>
                            <option value="运动">运动</option>
                            <option value="家庭">家庭</option>
                            <option value="古装">古装</option>
                            <option value="武侠">武侠</option>
                            <option value="西部">西部</option>
                            <option value="传记">传记</option>
                            <option value="歌舞">歌舞</option>
                            <option value="黑色电影">黑色电影</option>
                            <option value="短片">短片</option>
                            <option value="纪录片">纪录片</option>
                            <option value="音乐">音乐</option>
                            <option value="灾难">灾难</option>
                            <option value="青春">青春</option>
                            <option value="儿童">儿童</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>
                </div>`
            };
            // 单选框
            if (item.key === "isClassic") {
                return `  
                    <div class="layui-form-item">
                    <label class="layui-form-label" style="width:revert;text-align:">${item.name}</label>
                    <div class="layui-input-inline" style="right;width: 168px; margin-right:0px;">
                        <input type="radio" name="gender" value="true" title="true" checked lay-filter="ChoiceRadio">
                        <input type="radio" name="gender" value="false" title="false" lay-filter="ChoiceRadio">
                    </div>
                    </div>
                    `
            };
            if (item.key === "poster") {
                console.log(student["poster"]);
                return `
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: auto;">${item.name}</label>
                    <div>
                        <img src="" alt="" style="height: 303px;margin-left: 16px;" name="${item.key}">
                    </div>
                </div>
                `
            } else if (item.key === "intro") {
                return `
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: auto;">${item.name}</label>
                    <div>
                    <textarea name="${item.key}" cols="91" rows="12"></textarea>
                    </div>
                </div>
                `
            }
            return `
                <!--渲染添加的数据-->
                <div class="layui-form-item" >
                <label class="layui-form-label" style="width: auto;">${item.name}</label>
                <div class="layui-input-block">
                    <input type="test" value="${student[item.key]}" style="width: 204px;" name="${item.key}" required placeholder="请输入相关信息" lay-verify="required" class="layui-input">
                </div>
                </div>`}).join("")}
                <div>
                    <div style="width: 114px;margin: auto;">
                        <button id="reset-btn" type="reset" class="layui-btn layui-bg-gray" style="margin-left: 114px;margin-top: 120px;">修改海报</button>
                        <button id="save-btn" type="reset" class="layui-btn" style="margin-left: 114px;margin-top: 120px;">立即提交</button>
                    </div>
                </div>
            </form>
        </div>
    `);
    }
    // 获取到需要修改的电影信息
    async revise() {
        // 1、获取数据库的数据 2、把修改后的内容覆盖旧数据
        // 获取到input对应的值
        const cname = $("input[name=cname]").val();
        const ename = $("input[name=ename]").val();
        const type = this.student.type;
        const area = $("input[name=area]").val();
        const time = $("input[name=time]").val();
        const upDate = $("input[name=upDate]").val();
        const score = $("input[name=score]").val();
        const count = $("input[name=count]").val();
        const intro = $("textarea[name=intro]").val();
        const isClassic = this.student.isClassic;
        const director = $("input[name=director]").val();
        const actor = $("input[name=actor]").val();
        const _id = this.data._id;
        // 调用api的修改向后台发送请求
        await MoviesApi.revise({ cname, ename, type, area, time, upDate, score, count, intro, isClassic, director, actor, _id });
        location.hash = `#/info/movies`;
    }

    // 修改海报
    resetPoster() {
        location.hash = `#/info/upload-imgs/${this.student._id}`;
    }


    // select事件监听
    changeHandel() {
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        // this指向实例化对象
        const that = this;
        form.on('select(demo)', function (e) {
            // 获取到类型的值
            that.student.type = e.value;
        })
    }

    // 单选框监听事件
    radioHandel() {
        //layui兼容性
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        const that = this;
        form.on('radio(ChoiceRadio)', function (data) {
            console.log(that.student.isClassic);
            // 获取到单选框的值
            that.student.isClassic = data.value;
        });
    }

    // 获取电影数据
    async getOne() {
        // 结构拿到电影id
        const { _id } = this.data;
        // 获取数据并赋值给this.data
        this.student = await MoviesApi.getOne(_id);

    }
    // 再次渲染数据
    rerender() {
        // 将获取的数据渲染到对应单元格 
        _.map(this.student, (v, k) => {
            if (k === "_id") {
                return;
            } else if (k === "poster") {
                $(`img[name=${k}]`).attr("src", `/resource${v[0]}`);
            } else if (k === "intro") {
                $(`textarea[name=${k}]`).val(`${v}`);
            } else {
                // 获取用户需要修改的内容
                $(`input[name=${k}]`).val(`${v}`);
            }
        });

        // layui表单渲染
        const form = layui.form;
        // 调用render
        form.render();

    }
    async mounted() {
        await this.getOne();
        this.rerender();
    }
    // 添加事件
    handle() {
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        // 设置this的指向
        const student = this.student;
        // lodash 针对表单进行事件绑定 
        _.map(student, (v, k) => {
            if (k === "_id") {
                return;
            } else {
                // 获取用户绑定入的内容
                $(`input[name=${k}]`).on("input", e => {
                    // 每次输入拿到最新的值 在交给student对象
                    student[k] = e.target.value;
                });
            }
        });
        // 获取到按钮
        $("#save-btn").on("click", this.revise.bind(this));
        $("#reset-btn").on("click", this.resetPoster.bind(this));
        this.changeHandel();
        this.radioHandel();
    }

}